@import '../../assets/styles/vars.less';

.project-item {
  display: flex;
  flex-direction: column;
  padding: @base-size * 2;
  border-bottom: 1px solid @border-color;
  /*margin-bottom: @base-size;
  border-top: 1px solid @border-color;
  border-bottom: 1px solid @border-color;
  box-shadow: 0 2PX 7PX @bg-color;*/

  .img-wrapper {
    height: 200PX;
    border-radius: 2PX;
    overflow: hidden;
  }

  .title {
    .base-title;
    .no-wrap;
    height: @base-size * 4;
    line-height: @base-size * 4;
  }

  .meta {
    display: flex;
    align-items: center;
    margin-bottom: @base-size / 2;
    font-size: @text-size;
    color: @text-color-sub;

    .tags {
      flex: 3;
    }

    .date {
      flex: 1;
      font-size: @text-size-small;
      text-align: right;
    }

    .address {
      flex: 3;
      .no-wrap;
    }

    .price-wrapper {
      flex: 1;

      .price-unit {
        float: right;
      }
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  .price-wrapper {
    position: relative;
    color: @red;

    .price {
      line-height: @text-size-bigger;
      font-size: @text-size-bigger;
    }

    .unit {
      line-height: @text-size-small;
      font-size: @text-size-small;
    }

    .btn {
      position: absolute;
      top: 0;
      right: 0;
      line-height: 22px;
      font-size: @text-size-small;
    }
  }
}
